@extends('wap.layout.base')
@section('scripts')
    <script src="{{ asset('neditor/neditor.config.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/neditor.all.min.js') }}" type="text/javascript" > </script>
    <script src="{{ asset('neditor/neditor.service.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/i18n/zh-cn/zh-cn.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/third-party/browser-md5-file.min.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/third-party/jquery-1.10.2.min.js') }}" type="text/javascript" ></script>
    <script>
        //实例化编辑器
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    title: '发布文章',
                    form: {
                        id: 0,
                        title: '',
                        thumb: '',
                        content: '',
                        cateid: [],
                        tags: [],
                        summary: '',
                        _token:"{{csrf_token()}}"
                    },
                    cates: {!! $categories !!},
                    labels: {!! $labels !!},
                    editor: null,
                    cateShow: false,//分类右侧
                    cateValue: '',//分类选中
                    TagShow: false,//标签右侧
                    TagValue: '',//标签选中
                    radio: 1
                }
            },
            created(){
                this.editor = UE.getEditor('editor');
                let that = this;
                this.editor.ready(function(){
                    that.editor.setPlaceholder('请填写内容');
                });
            },
            methods: {
                onClickLeft() {
                    window.location.href = "{{ route('wap.user.index') }}";
                },
                update() {
                    let that = this;
                    this.form.content = this.editor.getContent();
                    if(!this.form.thumb){
                        this.$toast('请上传封面图');return false;
                    }
                    if(!this.form.title){
                        this.$toast('请填写标题');return false;
                    }
                    if(!this.form.summary){
                        this.$toast('请输入摘要');return false;
                    }
                    if(this.form.cateid.length < 1){
                        this.$toast('请选择类目');return false;
                    }
                    if(this.form.tags.length < 1){
                        this.$toast('请选择标签');return false;
                    }
                    if(!this.form.content){
                        this.$toast('请填写内容');return false;
                    }
                    $.post("{{ route('wap.user.publish') }}",this.form,function(res){
                        if(res.code){
                            that.$toast(res.msg);
                        }else{
                            that.$toast.loading({
                                duration: 0,       // 持续展示 toast
                                forbidClick: true, // 禁用背景点击
                                loadingType: 'spinner',
                                message: '保存成功'
                            });
                            setTimeout(function(){
                                that.$toast.clear();
                                window.location.href = "{{ route('wap.user.article') }}";
                            }, 1000);
                        }
                    });
                },
                //上传封面
                uploadSuccess(file) {
                    let that = this;
                    const isLt2M = file.file.size / 1024 / 1024 < 2;
                    if (!isLt2M) {
                        this.$toast('图片大小不能超过 2M!');return false;
                    }
                    let params = new FormData(); //创建form对象
                    params.append('image', file.file); //通过append向form对象添加数据//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
                    $.ajax({
                        type: "POST",
                        url: "{{ route('api.upload.img') }}",
                        data: params,
                        cache: false,
                        contentType: false,
                        processData : false,
                        success: function (data) {
                            that.form.thumb = data.data.path;
                        }
                    });
                },
                cateSelect(){
                    this.cateShow = false;
                    this.cates.filter((item)=>{
                        if(item.id == this.form.cateid){
                            this.cateValue = item.name;
                        }
                    });
                },
                tagSelect(){
                    this.labels.filter((item)=>{
                        if(item.id == this.form.tags[0]){
                            this.TagValue = item.name;
                        }
                    });
                }
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main user-detail article-pub" id="app" v-cloak>
        <div class="row">
            <van-nav-bar
                    :title="title"
                    left-text=""
                    border
                    fixed="true"
                    left-arrow="false"
                    @click-left="onClickLeft">
                <van-icon name="arrow-left" slot="left"/>
            </van-nav-bar>
            <div class="col-xs-12">
                <van-cell-group style="padding: 1rem 0;font-size: 1.5rem;color: #323233;">
                    <van-uploader :after-read="uploadSuccess">
                        <img v-if="form.thumb" :src="form.thumb" style="width:10rem;height:7rem;border: 1px dashed #ccc;"/>
                        <van-icon v-else style="width:10rem;height:7rem;border: 1px dashed #ccc;text-align: center;line-height:7rem;"/>+封面图
                    </van-uploader>
                </van-cell-group>
                <van-cell-group>
                    <van-field input-align="right" required v-model="form.title" label="标题" placeholder="请填写标题"/>
                </van-cell-group>
                <p style="padding-left: 0.7rem;margin-top: 1rem"><em style="font-style: normal;color: #FF0000;">*</em>摘要</p>
                <van-cell-group>
                    <van-field type="textarea" autosize v-model="form.summary" placeholder="请填写摘要"/>
                </van-cell-group>
                <van-cell-group>
                    <van-cell required title="类目" :value="cateValue"  @click="cateShow=true">
                        <van-icon v-if="!cateValue" slot="right-icon" style="position: relative;top:0.6rem;font-size: 1.5rem" name="arrow"/>
                    </van-cell>
                    <van-popup style="width: 80%" v-model="cateShow" position="right">
                        <van-radio-group @change="cateSelect" v-model="form.cateid">
                            <van-cell-group>
                                <van-cell v-for="cate in cates" :title="cate.name" clickable>
                                    <van-radio :name="cate.id" />
                                </van-cell>
                            </van-cell-group>
                        </van-radio-group>
                    </van-popup>
                </van-cell-group>
                <van-cell-group>
                    <van-cell required title="标签" :value="TagValue"  @click="TagShow=true">
                        <van-icon v-if="!TagValue" slot="right-icon" style="position: relative;top:0.6rem;font-size: 1.5rem" name="arrow"/>
                    </van-cell>
                    <van-popup style="width: 60%" v-model="TagShow" position="right">
                        <van-checkbox-group @change="tagSelect" :max="5" v-model="form.tags">
                            <van-cell-group>
                                <van-cell
                                        v-for="tag in labels"
                                        clickable
                                        :key="tag.id"
                                        :title="tag.name">
                                    <van-checkbox :name="tag.id" ref="checkboxes" />
                                </van-cell>
                            </van-cell-group>
                        </van-checkbox-group>
                    </van-popup>
                </van-cell-group>
                <p style="padding-left: 0.7rem;margin-top: 1rem"><em style="font-style: normal;color: #FF0000;">*</em>内容</p>
                <div id="editor" style="height:500px;"></div>
                <p class="form-submit" style="margin-top: 2rem">
                    <van-button type="default" @click="update()">保存提交</van-button>
                </p>
            </div>
        </div>
    </div>
@endsection

